<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .mid {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <a href="./day01指令.html">指令</a>
    <p>{{username}}</p>
    <!-- 文本插值，写变量用的 -->
    <p>偷袭{{age}}岁的老同志</p>
    <!-- 三元表达式 -->
    <i>{{hasWude? '' : '不'}}讲武德</i>
    <!-- 指令：根据自己的表达式的值来操作dom元素 -->
    <!-- v-model：将变量的值显示在输入框中，还可以修改 -->
    <input type="text" v-model="age">
    <!-- v-text: 将变量对应的文本显示在标签上 -->
    <h2 v-text="say"></h2>
    <i v-text="word"></i>
    <!-- v-html：将变量对应的文本以带有html格式的方式显示 -->
    <p v-html="reason"></p>
    <!-- v-once:数据只会修改一次，以后再修改时，仍然显示之前的内容，不会变化 -->
    <p v-once>{{realname}}</p>
    <!-- v-bind：绑定标签属性，使属性的值变成一个变量,缩写形式是冒号（：） -->
    <p v-bind:class="class1" :qwer="val1">我是P标签</p>
    <!-- v-on：绑定事件,缩写形式是邮箱（@） -->
    <button v-on:click="showHello">点击</button>
  </div>
  <!-- 1.安装 -->
  <script src="./vue.js"></script>
  <!-- 2.初始化一个vue实例 -->
  <script>
    let vm = new Vue({
      // 3. 进行具体的配置
      // 声明vue的作用范围
      el: '#app',
      data: {
        username: '马老师',
        realname: '马保国',
        age: 69,
        say: '耗子尾汁',
        word: '不讲武德',
        // 判断讲不讲武德
        hasWude: true,
        reason: '<mark>我大意了啊，没有闪</mark>',
        class1: 'mid',
        val1: 'hello' 
      },
      // 函数写在这里
      methods: {
        showHello() {
          this.hasWude = !this.hasWude;
        }
      },
    });
  </script>
</body>
</html>